"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { useColoContext, BColoContext } from "./(b-and-c)/b/context";

const HearderDiv = () => {
  const { color } = useColoContext();
  console.log('🐒 ~ HearderDiv ~ color: ', color)

  return (
      <div
        id="div"
        style={{
          backgroundColor: color,
          width: "100%",
          height: "10vh",
        }}
      >
        DEMO
      </div>
  );
};
const BodyDiv = () => {
  // 记录当前路由
  const [thisPat, setThisPat] = useState<string>("");
  // 获取当前路由
  const thisPatN = usePathname().split('/demo')[0] ?? '';
  useEffect(() => {
    // 只走一遍只为记录当前路由，当abc路由切换时候不受影响
    setThisPat(thisPatN + '/demo');
  }, []);

  return (
    <div style={{ width: "15%" }}>
      {["a", "b", "c"].map((item) => (
        <div key={item}>
          <Link href={`${thisPat}/${item}`}>to {item}</Link>
        </div>
      ))}
    </div>
  );
};
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <BColoContext>
      <HearderDiv></HearderDiv>
      <div style={{ display: "flex", height: "100vh" }}>
        <BodyDiv></BodyDiv>
        {children}
      </div>
    </BColoContext>
  );
}
